@charset 'utf-8';
@import 'reset';
@import 'base';
@import 'animate';
@import 'iconfont';

body,
html {
    width: 100%;
}

.web {
	width: r(640);
	height: r(1038);
	overflow-x: hidden;
	position: relative;
}

img {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-touch-callout: none;
	pointer-events:none;
}

.content-box {
	width: 100%;
	height: 100%;
	position: relative;

	.head-box {			
		width: 100%;
		height: r(200);
		background-image: url(../../img/lotto-head.jpg);
		background-size: 100%;

		.control-ico {
			width: r(80);
			height: r(80);
			text-align: center;
			i {
                font-size: r(60);
                line-height: r(80);
                color: #ffffff;
                vertical-align: text-top;
		    }
	    }

		.intro-ico {
			margin: r(20) 0 0 r(10);
		}

		.music-ico {
			margin: r(20) r(10) 0 0;
			i {
				color: limegreen;
			}
		}
	}

	.rule-window {
        width: 100%;
        height: r(830);
        background-image: url(../../img/lotto-rule-mainbg.png);
        background-size: 100%;
        position: absolute;
        top: r(208);
        z-index: 999;
        transition: 0.5s;
        transform: scale(0);
        transform-origin: r(50) r(-140);
        .rule-intro {
            width: r(584);
            height: r(773);
            background-image: url(../../img/lotto-rule-bg.png);
            background-size: 100%;
            box-shadow: 0px 4px 4px #2d0a12;
            position: absolute;
	        left: r(32);
	        top: r(-37);
	        z-index: 1000;

	        .rule-title {
	            font-size: r(34);
				line-height: r(42);
				font-weight: bold;
				text-align: center;
				margin-top: r(215);
	        }
	        .rule-list {
	            width: 100%;
	            margin-top: r(55);
	            li {
	            	font-size:r(24);
	                font-weight: bold;
	            	margin: 0 r(40) r(25) r(40);
	            }
	        }

	            .explain {
	            	width: 100%;
	            	margin-top: r(65);
	            	p {
	            		font-size: r(22);
	            		font-weight: bold;
	            		text-align: center;
	            	}
	            }

	            .owner-logo {
	            	width: r(175);
	            	height: r(45);
	            	margin: r(40) auto 0;
	            	img {
	            		width: 100%;
	            	}
	            }

	            .close-ico {
	            	width: r(73);
	            	height: r(73);
	            	border-radius: 50%;
	            	background: #ffffff;
	            	position: absolute;
	            	right: r(-20) ;
	            	top: r(-30);
	            	p {
	            		text-align: center;
	            		i {
	            			font-size: r(38);
	            			line-height: r(73);
	            			color: #6b0000;
	            		}
	            	}
	            }

            }
		}
}

